<template>
  <header>
    <div class="l-content">
      <el-button  @click='getmenu' icon='el-icon-menu' size='mini'></el-button>
      <el-breadcrumb separator="/">
         <el-breadcrumb-item  v-for='item in tag' :key='item.path' :to="{ path: item.path}">{{item.label}}</el-breadcrumb-item>     
        </el-breadcrumb>
    </div>
    <div class="r-content">
      <!-- dropdown下拉效果的el -->
       <el-dropdown trigger='click' size='mini'>                      
         <span>
           <img class='userimg' :src="userimg" >
         </span>
          <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <!-- 组件加事件 -->
              <el-dropdown-item @click.native='logOut'>退出</el-dropdown-item>  
          </el-dropdown-menu>
       </el-dropdown>
    </div>
  </header>
</template>

<script>
// 用vuex的mapState函数 用到tab里面的数据 就可以增加按钮了 
import { mapState } from 'vuex'
export default {
   name:'Header',
   data(){
     return{
       userimg:require('../images/user.png')
     }
   },
   methods:{
    getmenu(){
      // 用tab的函数 给那个布尔值取反
      this.$store.commit('collapseMenu')
    },
    logOut(){
      this.$store.commit('clearToken')
      this.$store.commit('cleaMenu')
      this.$router.push('/login')
    }
           },
computed:{
       ...mapState({
             //  命名为tag 拿到tab里的数组
       tag:state=>state.tab.tabsList
       }),
        // 效果和上面的一致 tag(){ 
        //     return this.$store.state.tab.tabsList
        // },
         },
    //  mounted(){
    //   console.log(this.tags,"tags");//打印看看是否获取到tag值
    //  }
}
</script>

<style lang='less' scoped>
  header{
    display:flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .l-content{
    display:flex;
    align-items: center;
    color: aliceblue;
    .el-button{
       margin-right: 20px;
    }
  }
  .r-content{
    .userimg{
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .el-breadcrumb ::v-deep .el-breadcrumb__inner {
        color: #fff !important;
   }
</style>